#search-ipt {
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px auto;
  background: white;
  width: 70%;
  left: 0;
  right: 0;
  padding: 0 .5rem;
  border-radius: 1rem;
  height: 30px;

  input {
    padding: 0 0 0 .3rem;
    background: transparent;
    font-size: 14px;
    line-height: 15px;
    height: 100%;
  }
}

#filter-menu {
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  width: 100%;
  padding: .5rem 0;
  background: white;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
    transform-origin: 0 0;
    transform: scaleY(.5);
  }

  > span {
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sanjiaoxing {
  font-size: 14px;
  color: #929292;
}

.house-list-container {
  .a-house {
    background: white;
  }
  .house-show {
    display: flex;
    position: relative;
    box-sizing: border-box;
    align-items: flex-start;

    img {
      max-width: 100%;
      min-width: 100%;
      min-height: 100vw / 3 * 2;
      max-height: 100vw / 3 * 2;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
  }

  .icon-xin {
    position: absolute;
    right: .5rem;
    top: .5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
    background: rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      color: white;
      font-size: 1.3rem;
      pointer-events: none;

      &.collected {
        color: #f46800;
      }
    }
  }

  .house-name {
    padding: .5rem;
    font-size: 16px;
    max-width: 80vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .house-des {
    font-size: 14px;
    padding: 0 .5rem .1rem .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .money {
    position: absolute;
    left: 0;
    bottom: 0;
    color: white;
    background: rgba(0, 0, 0, .5);
    padding: .3rem;
  }

  .avatar {
    min-width: 2rem;
    max-width: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    border-radius: 50%;
    position: absolute;
    right: 1rem;
    transform: translateY(-75%);
  }
  .label {
    font-size: 14px;
    display: flex;
    padding: 0 .5rem .5rem .5rem;

    .has {
      color: #f46800;
    }

    .icon {
      font-size: 14px;
    }
    > span {
      padding-right: .5rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.clicked {
  transform: rotate3d(0, 0, 1, 180deg);
  color: #f46800;
}

#side-filtrate-container {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .2);
  z-index: 13;
  transform: translate3d(100%, 0, 0);
  overflow: hidden;

  &.restore {
    transform: translate3d(0, 0, 0);
  }
  .side-filtrate-close {
    max-width: 2rem;
    min-width: 2rem;
    background: transparent;
  }
  .side-filtrate {
    flex-grow: 1;
    background: white;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    overflow: hidden;

    .content-container {
      flex-grow: 1;
      overflow-y: scroll;
    }
  }
}

.side-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, -100%, 0);
  overflow: hidden;
  background: rgba(0, 0, 0, .3);

  &.restore {
    transform: translate3d(0, 0, 0);
  }
  > .side-content {
    height: 75vh;
    flex-grow: 1;
    background: white;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;

    .content-container {
      overflow-y: scroll;
      flex-grow: 1;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

#side-sort-container {
  background: rgba(0, 0, 0, .2);

  .side-sort {
    height: 50%;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      height: 20%;
      padding: 0 .5rem;

      &.active {
        color: #f46800;
        .icon {
          color: #f46800;
        }
      }

      &:not(:last-of-type)::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        transform: scaleY(.5);
      }

    }
  }
}

.bubble {
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 10px;
  padding: 2px;
  border-radius: 50%;
  background: darkorange;
  color: white;
}

.selected-text-color {
  color: darkorange;
}

#main {
  > section {
    footer {
      width: 100%;
      display: flex;
      min-height: 2rem;
      max-height: 2rem;

      > span {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 14px;
        line-height: 2rem;

        &:first-of-type {
          background: orange;
        }
        &:last-of-type {
          background: darkorange;
        }
      }
    }
  }
}

#side-date-container {
  .month {
    position: relative;
    padding: .5rem 0;
    &:not(:last-of-type)::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      border-bottom: 1px dashed rgba(0, 0, 0, .2);
      transform: scaleY(.5);
    }

    h1 {
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      margin: 0 0 .5rem 0;
    }
    ul {
      display: flex;
      flex-flow: row nowrap;
      margin-bottom: 5px;

      li {
        width: calc(100% / 7);
        text-align: center;
        font-size: 14px;
        font-weight: 300;
      }
    }
    div {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .day {
        width: calc(100% / 7);
        text-align: center;
        font-size: 14px;
        padding: 3px;
        &.disable {
          color: #adadad;
        }
      }
      .selected {
        span {
          width: 100%;
          height: 100%;
          background: orange;
          color: white;
        }
      }
    }
  }
}

.tieku {
  display: block;
  position: relative;
  width: 100%;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    transform: scaleY(.5);
  }
}

.toggle-show-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  padding: .5rem;

  .toggle-show-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin: .5rem 0;
  }
  .icon {
    transform: rotate3d(0, 0, 1, 180deg);

    &.open {
      transform: rotate3d(0, 0, 1, 0);
      color: darkorange;
    }
  }
  .toggle-show-content {
    display: none;
    opacity: 0;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: .5rem;
    flex-wrap: wrap;

    &.show {
      display: flex;
      opacity: 1;
    }

    > span {
      display: block;
      text-align: center;
      font-size: 12px;
      width: 25%;
      padding: 5px 0;
      background: #d6d6d6;
      color: white;
      border: 5px solid white;
      border-radius: 3px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.selected {
        background: darkorange;
        color: white;
      }
    }
  }
}

.side-filtrate {
  .toggle-show-content {
    span {
      width: calc(100% / 3);
      padding: 5px 0;
      text-align: center;
      font-size: 14px;
      &.icon-container {
        font-size: 12px;
        text-align: left;
        padding: 5px 2px;
      }
    }
    .icon {
      color: white;
      font-size: 15px;
    }
  }
}

.people-num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.jian,
.jia {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
  border-radius: 3px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.jian {
  .icon {
    color: #c0c0c0;
    font-size: 1.2rem;
  }
}

.jia .icon {
  color: darkorange;
  font-size: 1.4rem;
}

#ipt-price {
  flex-direction: row;
  input {
    padding: 0;
    width: 30%;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
  }
}

#search-btn {
  color: white;
  padding-right: .5rem;
  font-size: 15px;
}